<template>
	<view class="search" :class="size == 'mini' ? 'mini' : ''" @click="skipSearch">
		<text class="iconfont icon-sousuo"></text>
		<!-- 滚动消息 -->
		<view class="search_chat">
			<swiper class="swiper" circular :autoplay="true" :interval="swiper.interval" :duration="swiper.duration" vertical>
				<swiper-item v-for="(item, index) in messages" :key="index">
					<view class="swiper-item">{{ item }}</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script setup>
import { reactive } from 'vue';

const props = defineProps({
	messages: {
		type: Array,
		default: () => ['请输入您要搜索的服务']
	},
	size: {
		type: String,
		default: 'normal'
	}
});
//滚动消息相关配置
const swiper = reactive({
	interval: 2000, //间隔时间
	duration: 500 //滑动时间
});

//跳转到搜索页
const skipSearch = () => uni.navigateTo({ url: '/pages/indexSub/search' });
</script>

<style lang="scss" scoped>
.search {
	background-color: #fff;
	border-radius: 70rpx;
	overflow: hidden;
	display: flex;
	align-items: center;
	padding: 8rpx 0;
	.iconfont {
		margin: 0 20rpx;
		color: #aaa;
		font-size: 30rpx;
	}
	.search_chat {
		width: 600rpx;
		height: 50rpx;
		color: #aaa;
		.swiper {
			height: 50rpx;
			.swiper-item {
				line-height: 50rpx;
				font-size: 24rpx;
			}
		}
	}
}
.mini {
	padding: 3rpx 0;
}
</style>
